<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>短视频平台 - 发现精彩瞬间</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    {% load static %}
    <link rel="stylesheet" href="{% static 'home/home.css' %}">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm py-3">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-play-circle me-2"></i>ShortVid
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="{% url 'home' %}">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'discover' %}">发现</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'hot' %}">热门</a>
                    </li>
                    <li class="nav-item">
                        {% if user.is_authenticated %}
                            <a class="nav-link" href="{% url 'following' %}">关注</a>
                        {% else %}
                            <a class="nav-link" href="{% url 'login' %}?next={% url 'following' %}" onclick="return remindLogin()">关注</a>
                        {% endif %}
                    </li>
                </ul>
                
                <div class="d-flex align-items-center">
                    {% if user.is_authenticated %}
                        <a href="{% url 'profile' %}" class="d-flex align-items-center me-3 text-decoration-none">
                            <div class="user-avatar">
                                {{ user.username|first|upper }}
                            </div>
                            <span class="user-greeting ms-2">你好, {{ user.username }}!</span>
                        </a>
                        <a href="{% url 'logout' %}" class="btn btn-outline-primary btn-sm">注销</a>
                    {% else %}
                        <a href="{% url 'login' %}" class="btn btn-outline-primary me-2">登录</a>
                        <a href="{% url 'register' %}" class="btn btn-primary">注册</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main>
        <!-- 英雄区域 -->
        <section class="hero-section">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6 hero-content fade-in">
                        <h1 class="display-4 fw-bold mb-4">发现精彩短视频</h1>
                        <p class="lead mb-4">探索、创作并分享你的精彩时刻。加入我们的社区，发现无限可能。</p>
                        {% if not user.is_authenticated %}
                            <div class="d-flex flex-wrap gap-3">
                                <a href="{% url 'register' %}" class="btn btn-light pulse">立即加入</a>
                                <a href="#" class="btn btn-outline-light">了解更多</a>
                            </div>
                        {% else %}
                            <a href="{% url 'profile' %}" class="btn btn-light pulse">开始创作</a>
                        {% endif %}
                    </div>
                    <div class="col-lg-6 text-center">
                        <div class="position-relative">
                            <div class="video-card mx-auto" style="max-width: 300px;">
                                <div class="video-thumbnail">
                                    <div class="play-icon">
                                        <i class="fas fa-play"></i>
                                    </div>
                                </div>
                                <div class="video-info bg-white">
                                    <div class="video-title">精彩短视频示例</div>
                                    <div class="video-creator">@热门创作者</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 统计数据 -->
        <section class="py-5">
            <div class="container">
                <div class="row text-center">
                    <div class="col-md-3 col-6 mb-4">
                        <div class="stats-number">10万+</div>
                        <div class="stats-label">每日活跃用户</div>
                    </div>
                    <div class="col-md-3 col-6 mb-4">
                        <div class="stats-number">50万+</div>
                        <div class="stats-label">短视频内容</div>
                    </div>
                    <div class="col-md-3 col-6 mb-4">
                        <div class="stats-number">5万+</div>
                        <div class="stats-label">内容创作者</div>
                    </div>
                    <div class="col-md-3 col-6 mb-4">
                        <div class="stats-number">99%</div>
                        <div class="stats-label">用户满意度</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 热门视频区域 -->
        <section class="py-5 bg-white">
            <div class="container">
                <h2 class="section-title">热门视频</h2>
                <div class="row">
                    <!-- 视频卡片1 -->
                    <div class="col-lg-3 col-md-6">
                        <div class="video-card">
                            <div class="video-thumbnail" style="background: linear-gradient(135deg, #ff7675, #fd79a8);">
                                <div class="play-icon">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            <div class="video-info">
                                <div class="video-title">创意美食制作</div>
                                <div class="video-creator">@美食达人</div>
                            </div>
                        </div>
                    </div>
                    <!-- 视频卡片2 -->
                    <div class="col-lg-3 col-md-6">
                        <div class="video-card">
                            <div class="video-thumbnail" style="background: linear-gradient(135deg, #74b9ff, #0984e3);">
                                <div class="play-icon">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            <div class="video-info">
                                <div class="video-title">旅行风景记录</div>
                                <div class="video-creator">@旅行家</div>
                            </div>
                        </div>
                    </div>
                    <!-- 视频卡片3 -->
                    <div class="col-lg-3 col-md-6">
                        <div class="video-card">
                            <div class="video-thumbnail" style="background: linear-gradient(135deg, #55efc4, #00b894);">
                                <div class="play-icon">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            <div class="video-info">
                                <div class="video-title">健身挑战30天</div>
                                <div class="video-creator">@健身教练</div>
                            </div>
                        </div>
                    </div>
                    <!-- 视频卡片4 -->
                    <div class="col-lg-3 col-md-6">
                        <div class="video-card">
                            <div class="video-thumbnail" style="background: linear-gradient(135deg, #fdcb6e, #e17055);">
                                <div class="play-icon">
                                    <i class="fas fa-play"></i>
                                </div>
                            </div>
                            <div class="video-info">
                                <div class="video-title">搞笑宠物合集</div>
                                <div class="video-creator">@宠物乐园</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-center mt-4">
                    <a href="{% url 'hot' %}" class="btn btn-outline-primary">查看更多视频</a>
                </div>
            </div>
        </section>

        <!-- 平台特色 -->
        <section class="py-5">
            <div class="container">
                <h2 class="section-title">为什么选择我们</h2>
                <div class="row">
                    <div class="col-md-4">
                        <div class="feature-card card p-4 text-center h-100">
                            <div class="feature-icon">
                                <i class="fas fa-bolt"></i>
                            </div>
                            <h4>极速上传</h4>
                            <p>采用分布式架构，实现视频秒级上传与处理，让创作更流畅。</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="feature-card card p-4 text-center h-100">
                            <div class="feature-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <h4>活跃社区</h4>
                            <p>加入百万创作者社区，分享你的创意，发现志同道合的朋友。</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="feature-card card p-4 text-center h-100">
                            <div class="feature-icon">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                            <h4>安全可靠</h4>
                            <p>采用先进的数据保护技术，确保您的创作和隐私安全无忧。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-4">
                    <h4 class="mb-4">
                        <i class="fas fa-play-circle me-2"></i>ShortVid
                    </h4>
                    <p>发现精彩短视频，记录美好生活瞬间。加入我们的社区，一起创作、分享和发现。</p>
                    <div class="social-icons mt-4">
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-qq"></i></a>
                        <a href="#"><i class="fab fa-github"></i></a>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6 mb-4">
                    <h5 class="mb-4">平台</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="{% url 'home' %}">首页</a></li>
                        <li class="mb-2"><a href="{% url 'discover' %}">发现</a></li>
                        <li class="mb-2"><a href="{% url 'hot' %}">热门</a></li>
                        {% if user.is_authenticated %}
                            <li class="mb-2"><a href="{% url 'following' %}">关注</a></li>
                        {% else %}
                            <li class="mb-2"><a href="{% url 'login' %}?next={% url 'following' %}" onclick="return remindLogin()">关注</a></li>
                        {% endif %}
                    </ul>
                </div>
                <div class="col-lg-2 col-md-6 mb-4">
                    <h5 class="mb-4">帮助</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="#">帮助中心</a></li>
                        <li class="mb-2"><a href="#">使用指南</a></li>
                        <li class="mb-2"><a href="#">社区准则</a></li>
                        <li class="mb-2"><a href="#">联系我们</a></li>
                    </ul>
                </div>
                <div class="col-lg-4 mb-4">
                    <h5 class="mb-4">订阅我们的资讯</h5>
                    <p>获取最新功能和活动信息</p>
                    <div class="input-group mb-3">
                        <input type="email" class="form-control" placeholder="请输入您的邮箱">
                        <button class="btn btn-primary" type="button">订阅</button>
                    </div>
                </div>
            </div>
            <hr class="my-4">
            <div class="text-center">
                <p>&copy; 2023 ShortVid 短视频平台. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS 和依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{% static 'home/home.js' %}"></script>
    <script>
        function remindLogin() {
            alert('请先登录后查看关注内容');
            return true; // 继续跳转到登录页
        }
    </script>
</body>
</html>